<template>
    <div>
      <div class="search">
          <div class="input">
              <p><label>推送类型：</label>
                <el-select v-model="searchData.type" placeholder="请选择">
                    <el-option
                      v-for="item in istype"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
              </p>
              <p><label>平台：</label>
                  <el-select v-model="searchData.platform" placeholder="请选择">
                      <el-option
                        v-for="item in iSplatform"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                  </el-select>
              </p>
              <!-- <label>：</label><el-input v-model="condition" placeholder="请输入名称" label="条件"></el-input> -->
              <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
          </div>
      </div>
      <div class="add">
         <el-button type="primary" @click="dialogs">新增</el-button>
      </div>
      <tableVue :list="list" :state="false"  v-loading="loading" :total="total" @sizeChange="handSize">
          <slot>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.row)">编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    class="del"
                    @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
          </slot>
      </tableVue>
      <dialogVue title="新增消息来源" :dialog="dialog" @close="changeData" :state="false">
          <slot>
              <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                  <el-form-item label="推送标题" prop="name">
                      <el-input v-model="ruleForm.title" placeholder="请输入内容"></el-input>
                   </el-form-item>
                   <el-form-item label="推送类型" prop="name">
                       <el-select v-model="ruleForm.type" placeholder="请选择">
                           <el-option
                             v-for="item in istype"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                           </el-option>
                       </el-select>
                    </el-form-item>
                    <el-form-item label="苹果路由" prop="name">
                        <el-input v-model="ruleForm.appleRouter" placeholder="请输入内容"type="textarea"></el-input>
                     </el-form-item>
                     <el-form-item label="安卓路由" prop="name">
                         <el-input v-model="ruleForm.androidRouter" placeholder="请输入内容" type="textarea"></el-input>
                      </el-form-item>
                      <el-form-item label="推送内容" prop="name">
                          <el-input v-model="ruleForm.content" placeholder="请输入内容" type="textarea"></el-input>
                       </el-form-item>
                       <el-form-item label="推送用户" prop="name">
                         <el-select v-model="ruleForm.userType" placeholder="请选择">
                             <el-option
                               v-for="item in isuserType"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                             </el-option>
                         </el-select>
                        </el-form-item>
                        <el-form-item label="推送平台" prop="name">
                            <el-select v-model="ruleForm.platform" placeholder="请选择">
                                <el-option
                                  v-for="item in iSplatform"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                         </el-form-item>
                          <el-form-item label="活动结束时间" prop="name" v-if="ruleForm.type == '2'">
                                <el-date-picker
                                  v-model="ruleForm.activityEndTime"
                                  type="date"
                                  placeholder="选择日期">
                                </el-date-picker>
                           </el-form-item>
                           <el-form-item label="显示图片">
                               <el-upload
                                  class="upload-demo"
                                  ref="upload"
                                  :limit="1"
                                  :action="uploadingImg"
                                  :on-change="changeImgFile"
                                  :http-request='custom'
                                  :file-list="fileList"
                                  :on-exceed="exceed"
                                  list-type="picture"
                                  :auto-upload="false">
                                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                  <el-button style="margin-left: 10px;" size="small" type="success" @click="custom">上传到服务器</el-button>
                                </el-upload>
                           </el-form-item>
                      <el-form-item class="confirm">
                          <el-button type="primary"  v-if="btnState=='1'" @click="submitForm('post')">创建</el-button>
                         <el-button type="primary"  v-if="btnState=='2'" @click="submitForm('put')">更新</el-button>
                     </el-form-item>
              </el-form>
          </slot>
      </dialogVue>
    </div>
</template>

<script>
  import Data from './msgManageData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    msgList,addMsg
  } from "@/api/message/message";
  import {
    upLoadingImg
  } from "@/api/shoppingCentre/shoppingCentre";
  export default {
    components : {
      tableVue,
      dialogVue
    },
     data () {
       return JSON.parse(JSON.stringify(Data))
     },
     mounted () {
       this.getMsgList({current : '1', size : "10"});
     },
     methods : {
       search () {
         var data = {
           type : searchData.type,
           platform : searchData.platform,
           current : val,
           size : '10'
         }
          this.getMsgList(data);
       },
       changeImgFile (file) {
           let reader = new FileReader();
           reader.readAsDataURL(file.raw);
           reader.onload =  () => {
             this.imgData.base64Str = reader.result.split(',')[1];
           }
           this.imgData.id = file.uid;
           this.imgData.fileOriginName = file.name;
           this.imgData.fileType = file.name.split('.')[1];
       },
       exceed (files, fileList) {
         this.$message.error("只能传一张图片");
       },
       custom (file) {
         var data = {
           base64Str : this.imgData.base64Str,
           fileOriginName : this.imgData.fileOriginName,
           fileType : this.imgData.fileType,
           id : this.imgData.id,
         }
         if (data.base64Str == '') {
           this.$message.error('请先上传到服务器')
           return false
         }
         this.$message({
            showClose: true,
            message: '图片正常在上传请稍后.......',
            type: 'warning'
          });
         upLoadingImg(data).then(res=>{
           if (res.data.code == 'OK') {
               this.$message.success('上传图片成功');
               this.ruleForm.image = res.data.data.fileURL
           } else {
             this.$message.error(res.data.message);
           }
         })
       },
       getMsgList (data) {
         this.loading = true
         msgList (data).then(res=>{
           if (res.data.code == 'OK') {
                this.loading = false;
                this.total = res.data.data.total;
              this.list.tbody = res.data.data.records.map(item=>{

                item.gmtCreate = this.switchTime(item.gmtCreate)
                item.gmtUpdate = this.switchTime(item.gmtUpdate)
                switch (item.platform ) {
                  case '0' : item.platform = '全平台'
                  break;
                  case '1' : item.platform = '安卓';
                  break;
                  case '2' : item.platform = '苹果';
                  break;
                  default:
                }
                switch (item.type) {
                  case '1':item.type = '系统消息';
                  break;
                  case '2':item.type = item.type = '活动消息';
                  break;
                  case '3':item.type = item.type = '推送消息';
                  break;
                  default:
                }
                switch (item.userType) {
                  case 1 : item.userType='全部用户';
                  break;
                  case 2 : item.userType='三个月内登录用户';
                  break;
                  case 3 : item.userType='三个月内购买用户';
                  break;
                  case 4 : item.userType='未购买用户';
                  break;
                  case 5 : item.userType='三个内寄卖用户';
                  break;
                  case 6 : item.userType='未寄卖用户';
                  break;
                  default:
                }
                return item;
              });
           } else {
             this.$message.error(res.data.message);
           }
         })
       },
       dialogs() {
            this.btnState = '1'
         this.dialog = true;
       },
       changeData (val) {
           this.dialog = val
       },
       del (item) {
         this.delMessage(()=>{
             var id = Array.of(item.id)
             addMsg(id,'DELETE').then(res=>{
             if (res.data.code == 'OK') {
                 this.$message.success('删除成功');
                   this.getMsgList({current : this.val, size : "10"});
             } else {
               this.$message.error(res.data.message);
             }
           })
         })
       },
       handleEdit (item) {
          this.getMsgList({current : '1', size : "10"});
         this.btnState = '2'
         this.fileList = [];
         delete item.gmtCreate;
         delete item.gmtUpdate;
         delete item.remark;
         delete item.pushTime;
         if (item.platform == '全平台') {
           item.platform = '0'
         } else if (item.platform == '安卓') {
           item.platform = '1'
         } else {
           item.platform = '苹果'
         }
         if (item.userType == '全部用户') {
           item.userType = '1'
         } else if (item.userType == '三个月内登录用户') {
           item.userType = '2'
         } else if (item.userType == '三个月内购买用户') {
           item.userType = '3'
         } else if (item.userType == '未购买用户') {
            item.userType = '4'
         } else if (item.userType == '三个内寄卖用户') {
           item.userType = '5'
         } else {
           item.userType = '6';
         }
         if (item.type == '系统消息') {
           item.type = '1'
         } else if (item.type == '活动消息') {
           item.type = '2'
         } else {
           item.type = '3'
         }
         this.ruleForm = item;
         this.dialog = true;
         this.fileList.push({url:item.image,name:''})
       },
       handSize (val) {
         this.val = val;
         var data = {
           type : searchData.type,
           platform : searchData.platform,
           current : val,
           size : '10'
         }
          this.getMsgList(data);
       },
       submitForm (method) {
         addMsg(this.ruleForm,method).then(res=>{
           if (res.data.code == 'OK') {
               this.dialog = false;
               if (method == 'post') {
                 this.$message.success('新增消息成功');
               } else {
                 this.$message.success('编辑消息成功');
               }
               this.getMsgList({current : '1', size : "10"});
           } else {
             this.$message.error(res.data.message)
           }
         })
       }
     }
  }
  </script>

<style scoped>
  @import "../../../styles/common.css";
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
</style>
